import {
  Button,
  Card,
  Modal,
  Space,
  Spin,
  TabPane,
  Tabs,
  TypographyText,
  TypographyTitle
} from 'ant-design-vue'
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import { questionApi } from '@/apis'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'

import ResultList from './ResultList'

export default defineComponent({
  name: 'QResultDetail',
  setup() {
    const route = useRoute()
    const tableRef = ref({} as ProTableRef)
    const summaryData = ref(
      {} as { accuracy: number; average: number; peopleNum: number }
    )
    const statisticsList = ref(
      [] as {
        accuracy: number
        question: string
      }[]
    )

    const loading = ref(false)
    const activeTab = ref(1)
    const memberIdCur = ref('')
    const showResultDlg = ref(false)
    const tableConfig = ref({
      fixedHeight: false,
      options: {
        border: true,
        align: 'center',

        columnConfig: {
          minWidth: 100
        },
        columns: [
          {
            title: 'ID',
            field: 'memberId',
            width: 80
          },
          {
            title: '用户',
            field: 'nickname'
          },
          {
            title: '得分',
            field: 'rewardPointAll'
          },
          {
            title: '操作',
            fixed: 'right',
            slots: {
              default: ({ row }) => {
                return (
                  <Button
                    type="link"
                    onClick={() => {
                      memberIdCur.value = row.memberId
                      showResultDlg.value = true
                    }}
                  >
                    详情
                  </Button>
                )
              }
            },
            width: 250
          }
        ],
        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              const data = await questionApi.getMemberList({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                ...form,
                activityId: route.query.id
              })
              return data
            }
          }
        }
      }
    } as ProTableProps)

    onMounted(() => {
      getDetail()
    })

    async function getDetail() {
      try {
        loading.value = true
        summaryData.value = await questionApi.getSummaryData(route.query.id)
        statisticsList.value = await questionApi.getStatiicsList(route.query.id)
      } finally {
        loading.value = false
      }
    }

    return {
      tableRef,
      tableConfig,
      loading,
      activeTab,
      memberIdCur,
      summaryData,
      showResultDlg,
      statisticsList,
      route
    }
  },
  render() {
    return (
      <Spin spinning={this.loading}>
        <div
          style={{
            marginLeft: '40px'
          }}
        >
          <Space size="large">
            <Card style={{ width: '300px' }}>
              <TypographyText type="secondary">平均分</TypographyText>
              <TypographyTitle level={2}>
                {this.summaryData.average}
              </TypographyTitle>
            </Card>
            <Card style={{ width: '300px' }}>
              <TypographyText type="secondary">答题人数</TypographyText>
              <TypographyTitle level={2}>
                {this.summaryData.peopleNum}
              </TypographyTitle>
            </Card>
            <Card style={{ width: '300px' }}>
              <TypographyText type="secondary">正确率</TypographyText>
              <TypographyTitle level={2}>
                {this.summaryData.accuracy}%
              </TypographyTitle>
            </Card>
          </Space>
          <Tabs v-model:activeKey={this.activeTab}>
            <TabPane key={1} tab="提交情况">
              <ProTable style={{ width: '915px' }} {...this.tableConfig} />
            </TabPane>
            <TabPane key={2} tab="答题统计">
              <Space
                direction="vertical"
                style={{ marginLeft: '15px' }}
                size="middle"
              >
                {this.statisticsList?.map((item, index) => {
                  return (
                    <div style={{ display: 'flex' }}>
                      <TypographyText style={{ width: '500px' }}>
                        {`${index + 1}. ${item.question}`}
                      </TypographyText>
                      <TypographyText
                        style={{
                          width: '60px',
                          marginLeft: '20px'
                        }}
                      >
                        正确率：
                      </TypographyText>
                      <TypographyText
                        type={item.accuracy >= 60 ? 'success' : 'danger'}
                      >
                        {item.accuracy}%
                      </TypographyText>
                    </div>
                  )
                })}
              </Space>
            </TabPane>
          </Tabs>
        </div>
        <Modal
          v-model:visible={this.showResultDlg}
          title="答题详情"
          destroyOnClose
          width={650}
          footer={null}
        >
          <ResultList
            activityId={String(this.route.query.id)}
            memberId={this.memberIdCur}
          />
        </Modal>
      </Spin>
    )
  }
})
